<template>
  <div class="main-box">
    <div class="share-box">
      <div class="share-context">
        <!--分享图片-->
        <iz-image class="info-img" :src="fakeShareData.imgSrc" alt=""></iz-image>
        <!--分享文字-->
        <div class="share-text">
          <!--分享文字=标题-->
          <div class="share-title w100">
            <span v-show="!isDisplayFlag.titleInput" class="share-title-word text-over" @click="focusTitleInput">{{fakeShareData.title}}</span>
            <input v-show="isDisplayFlag.titleInput" class="no-border-input" ref="titleInput" type="text"
                   v-model="fakeShareData.title" @blur="blurTitleInput">
          </div>
          <!--分享文字=正文-->
          <div class="share-desc">
            <p v-show="!isDisplayFlag.contextInput" class="share-desc-word text-over2" @click="focusContextInput">
              {{fakeShareData.desc}}</p>
            <textarea v-show="isDisplayFlag.contextInput" class="no-border-textarea" ref="contextInput"
                      @blur="blurContextInput" v-model="fakeShareData.desc"></textarea>
          </div>
        </div>
      </div>
      <div class="share-footer">
        <div>网页</div>
        <div class="footer-link"><span>转发</span><span>收藏</span><span>打开</span></div>
      </div>
    </div>
    <el-input v-model="fakeShareData.url" type="textarea" placeholder="请输入内容" class="qr-text"></el-input>
    <el-button class="btn" @click="share('QQ')">生成</el-button>
  </div>
</template>

<script>
let izImage = resolve => (require('../component/image.vue'), resolve)
export default {
  name: 'fakeShareBuilder',
  components: {
    izImage
  },
  data () {
    return {
      isDisplayFlag: {
        titleInput: false,
        contextInput: false
      },
      fakeShareData: {
        imgSrc: 'http://pic-oskysolo.oss-cn-hangzhou.aliyuncs.com/181214164417236410.jpg?Expires=1860137057&OSSAccessKeyId=LTAIrCkSyf7SgQND&Signature=EII74rn4a7YjtFvIgFOSxpa38Ig%3D',
        title: '标题',
        desc: '内容',
        url: 'https://ak.hypergryph.com/index'
      }
    }
  },
  methods: {
    focusContextInput () {
      this.$set(this.isDisplayFlag, 'contextInput', true)
      if (this.fakeShareData.desc === '内容') {
        this.$set(this.fakeShareData, 'desc', '')
      }
      this.$nextTick(() => {
        this.$refs.contextInput.focus()
      })
    },
    blurContextInput () {
      this.$set(this.isDisplayFlag, 'contextInput', false)
      if (this.fakeShareData.desc === '') {
        this.$set(this.fakeShareData, 'desc', '内容')
      }
    },
    focusTitleInput () {
      this.$set(this.isDisplayFlag, 'titleInput', true)
      if (this.fakeShareData.title === '标题') {
        this.$set(this.fakeShareData, 'title', '')
      }
      this.$nextTick(() => {
        this.$refs.titleInput.focus()
      })
    },
    blurTitleInput () {
      this.$set(this.isDisplayFlag, 'titleInput', false)
      if (this.fakeShareData.title === '') {
        this.$set(this.fakeShareData, 'title', '标题')
      }
    },
    share (target) {
      let map = {
        url: this.fakeShareData.url, /*  获取URL，可加上来自分享到QQ标识，方便统计 */
        desc: null, /*  分享理由(风格应模拟用户对话),支持多分享语随机展现（使用|分隔  */
        title: this.fakeShareData.title, /*  分享标题(可选)  */
        summary: this.fakeShareData.desc, /*  分享描述(可选)  */
        pics: this.fakeShareData.pic, /*  分享图片(可选)  */
        flash: '', /*  视频地址(可选)  */
        site: this.site, /*  分享来源 (可选) */
        appkey: '', /* 新浪微博参数，您申请的应用appkey,显示分享来源(可选) */
        ralateUid: '', /* 关联用户的UID，分享微博会@该用户(可选) */
        rnd: new Date().valueOf(), /* 微博用参数 */
        showcount: '1' /* QQ空间，是否显示分享总数,显示：'1'，不显示：'0' */
      }
      let list = []
      for (let index in map) {
        list.push(index + '=' + encodeURIComponent(map[index] || ''))
      }
      let targetUrl = 'http://connect.qq.com/widget/shareqq/index.html?' + list.join('&')
      if (target === 'QQ') {
        targetUrl = 'http://connect.qq.com/widget/shareqq/index.html?' + list.join('&')
      }
      if (target === 'weibo') {
        targetUrl = 'http://service.weibo.com/share/share.php?' + list.join('&')
      }
      if (target === 'QZ') {
        targetUrl = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?' + list.join('&')
      }
      window.open(targetUrl)
    }
  }
}
</script>

<style scoped>
  .share-box {
    width: 285px;
    height: 125px;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    margin: 20px auto;
  }

  .share-context {
    height: 90px;
    padding: 10px;
    box-sizing: border-box;
    display: flex;;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
  }

  .share-footer {
    height: 35px;
    padding: 5px 15px;
    border-top: 1px solid #e5e5e5;
    box-sizing: border-box;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
  }

  .footer-link {
    width: 90px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
    color: #3a8ee6;
  }

  .info-img {
    height: 70px;
    width: 70px;
    /*border: 1px solid #e5e5e5;*/
  }

  .share-text {
    height: 70px;
    width: 185px;
    /*font-size: 12px;*/
    /*border: 1px solid #e5e5e5;*/
  }

  .share-title {
    font-size: 16px;
    height: 31px;
  }

  .share-title-word {
    display: inline-block;
    width: 100%;
  }

  .share-desc {
    height: 40px;
    color: #e5e5e5;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;;
    align-items: center;
    line-height: 20px;
  }

  .share-desc-word {
    height: 100%;
    width: 100%;
  }

  .qr-box {
    width: 100px;
    height: 100px;
    margin: 30px auto;
  }

  .qr-text {
    display: block;
    margin: 50px auto;
    width: 80%;
  }

  .btn {
    display: block;
    margin: 0 auto;
  }
</style>
